HTMLify

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap");

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  background-color: #0d0d0d;
  margin: 10%;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 200vh;
}

.text {
  font-size: 10vw;
  letter-spacing: -0.01em;
  line-height: 100%;
  margin: 0;
  width: 100%;
  color: rgb(182, 182, 182, 0.2);
  background: linear-gradient(to right, #b7ab98, #b7ab98) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 0%;
  transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 0.5s;
  border-bottom: 1px solid #2f2b28;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

span {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #eb593a;
  color: #0d0d0d;
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  transform-origin: center;
  transition: all cubic-bezier(0.1, 0.5, 0.5, 1) 0.4s;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.text:hover>span {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

a {
  text-decoration: none;
  color: inherit;
}